<template>
  <div style="width: 100%">
    <span v-if="props.showText"></span>
    <el-input
      v-else
      v-model="formData[prop]"
      :placeholder="placeholder"
      type="password"
      @change="handleChange"
      @blur="handleBlur"
    />
  </div>
</template>

<script setup>
import { onMounted, inject } from 'vue';

const emit = defineEmits(['change', 'blur']);
const props = defineProps({
  prop: {
    type: String,
    default: ''
  },
  options: Object,
  showText: Boolean,
  placeholder: String
});

const formData = inject('formData');

const handleChange = () => {
  emit('change');
};

const handleBlur = () => {
  emit('blur');
};

onMounted(() => {
  formData.value[props.prop] = '';
});
</script>